<template>
  <div
    class="search-card"
    :style="{
      height: isFill ? '100%' : 'auto'
    }"
  >
    <div class="search-card__header">{{ title }}</div>
    <div class="search-card__body">
      <slot />
    </div>
    <div v-if="$slots.footer" class="search-card__footer">
      <slot name="footer" />
    </div>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: 'MSearchCard'
})

withDefaults(
  defineProps<{
    title: string
    isFill?: boolean
  }>(),
  {
    isFill: true
  }
)
</script>
<style lang="scss" scoped>
.search-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  width: 230px;

  border: 2px solid #e8e8e8;

  &__header {
    height: 52px;
    background: #f5f6f8;
    color: #827f86;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #e8e8e8;
  }

  &__body {
    width: 100%;
    box-sizing: border-box;
    flex: auto;
    padding: 5px;
    min-height: 0;
    overflow: auto;
  }

  &__footer {
    text-align: right;
  }
}
</style>
